@import '~antd/lib/style/themes/default.less';

@nav-header-height: @layout-header-height;

@menuBg: rgba(39, 51, 58, 1);
@logoBg: #26333a;
@menuFontColor: rgba(122, 144, 157, 1);

.logo {
  height: @nav-header-height;
  position: relative;
  line-height: @nav-header-height;
  padding-left: (@menu-collapsed-width - 32px) / 2;
  transition: all 0.3s;
  background: @logoBg;
  box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.06);
  overflow: hidden;

  img {
    display: inline-block;
    vertical-align: middle;
    height: 32px;
  }

  h1 {
    color: white;
    display: inline-block;
    vertical-align: middle;
    margin: 0 0 0 12px;

    font-size: 16px;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    line-height: 22px;
  }
}

.sider {
  min-height: 100vh;
  position: relative;
  z-index: 10;

  &.fixSiderbar {
    position: fixed;
    top: 0;
    left: 0;
    :global(.ant-menu-root) {
      overflow-y: auto;
      height: ~'calc(100vh - @{nav-header-height})';
    }
  }

  &.light {
    box-shadow: 2px 0 8px 0 rgba(29, 35, 41, 0.05);
    background-color: white;

    .logo {
      background: white;
      box-shadow: 1px 1px 0 0 @border-color-split;
      h1 {
        color: @primary-color;
      }
    }

    :global(.ant-menu-light) {
      border-right-color: transparent;
    }
  }

  // 更改左侧菜单栏的样式
  &:global(.ant-layout-sider) {
    background: @menuBg;
  }

  :global(.ant-menu-dark) {
    background: @menuBg;
  }

  :global(.ant-menu-item) {
    margin: 6px 0;
    height: 46px;
    display: flex;
    align-items: center;
  }

  :global(.ant-menu-item .anticon) {
    color: @menuFontColor;
    font-size: 22px;
  }

  :global(.ant-menu-submenu .anticon) {
    color: @menuFontColor;
    font-size: 22px !important;
  }

  .menuLink {
    color: @menuFontColor !important;
    font-size: 14px;
    align-items: center;
    display: flex;
    line-height: 20px;
    font-weight: bold;
  }

  :global(.ant-menu-sub) {
    background: @menuBg !important;
    box-shadow: none !important;

    .menuLink {
      font-size: 13px;
      color: @menuFontColor;
      line-height: 18px;

      :global(.anticon) {
        font-size: 16px !important;
      }
    }
  }

  :global(.ant-menu-item-selected) {
    background: rgba(46, 59, 66, 1) !important;
    position: relative;

    &::before {
      content: '';
      display: inline-block;
      width: 4px;
      height: 46px;
      background: rgba(0, 144, 251, 1);
      position: absolute;
      left: 4px;
    }

    i,
    span {
      color: #aebcc6 !important;
    }
  }
}

:global {
  .top-nav-menu li.ant-menu-item {
    height: @nav-header-height;
    line-height: @nav-header-height;
  }
  .drawer .drawer-content {
    background: #001529;
  }
  .ant-menu-inline-collapsed {
    & > .ant-menu-item .sider-menu-item-img + span,
    &
      > .ant-menu-item-group
      > .ant-menu-item-group-list
      > .ant-menu-item
      .sider-menu-item-img
      + span,
    & > .ant-menu-submenu > .ant-menu-submenu-title .sider-menu-item-img + span {
      max-width: 0;
      display: inline-block;
      opacity: 0;
    }
  }
  .ant-menu-submenu-title {
    display: flex;
  }
  .ant-menu-item .sider-menu-item-img + span,
  .ant-menu-submenu-title .sider-menu-item-img + span {
    transition: opacity 0.3s @ease-in-out, width 0.3s @ease-in-out;
    opacity: 1;
  }
  .ant-drawer-left {
    .ant-drawer-body {
      padding: 0;
    }
  }
}
